<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- thymeleaf模板对springsecurity有提供支持，前提maven要导入相关依赖,然后在模板中要引入security的名称空间 -->
<!--目标实现两个功能-->
<!-- 未认证显示游客，认证后显示用户名跟所拥有的角色 -->
<!-- 根据各自的角色显示各自能看的武功秘籍列表 -->

<h1 align="center">欢迎光临武林秘籍管理系统</h1>
<!--  sec:authorize="!isAuthenticated()"  未认证  -->
<div sec:authorize="!isAuthenticated()">
	<h2 align="center">游客您好，如果想查看武林秘籍 <a th:href="@{/userlogin}">请登录</a></h2>
</div>

<div sec:authorize="isAuthenticated()">
	<h2><span sec:authentication="name"></span> 您好!您的角色有：
		<span sec:authentication="principal.authorities"></span></h2>
	<form th:action="@{/logout}" method="post">
		<input type="submit" value="注销"/>
	</form>
</div>

<hr>

<!-- 根据不同角色显示不同列表
	前后端分离的话就是后端吧显示什么跟URL返回给前端让前端自己做，后端考虑好自己的数据安全即可
	但这里用的是thymeleaf模板引擎,连页面跳转都是服务器端在做，所以直接这样写就行，页面都是服务器渲染好了在返回给前端，肯定安全
	但就是比较耗费服务器端资源
-->
<div sec:authorize="hasRole('VIP1')">
<h3>普通武功秘籍</h3>
<ul>
	<li><a th:href="@{/level1/1}">罗汉拳</a></li>
	<li><a th:href="@{/level1/2}">武当长拳</a></li>
	<li><a th:href="@{/level1/3}">全真剑法</a></li>
</ul>
</div>

<div sec:authorize="hasRole('VIP2')">
<h3>高级武功秘籍</h3>
<ul>
	<li><a th:href="@{/level2/1}">太极拳</a></li>
	<li><a th:href="@{/level2/2}">七伤拳</a></li>
	<li><a th:href="@{/level2/3}">梯云纵</a></li>
</ul>
</div>

<div sec:authorize="hasRole('VIP3')">
<h3>绝世武功秘籍</h3>
<ul>
	<li><a th:href="@{/level3/1}">葵花宝典</a></li>
	<li><a th:href="@{/level3/2}">龟派气功</a></li>
	<li><a th:href="@{/level3/3}">独孤九剑</a></li>
</ul>
</div>

</body>
</html>